﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html lang="zh-CN">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>jQuery熊猫遮眼动画登录</title>
    <link href="/css/snow.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/style1.css">
    <style type="text/css">
        a{text-decoration:none;}
        a:hover{
            color: red;
        }
    </style>



</head>

<body>
<%--雪花--%>
<div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>
<div>

<div class="dwo">

	<div class="panda">

		<div class="ear"></div>
		<div class="face">
			<div class="eye-shade"></div>
			<div class="eye-white">
				<div class="eye-ball"></div>
			</div>
			<div class="eye-shade rgt"></div>
			<div class="eye-white rgt">
				<div class="eye-ball"></div>
			</div>
			<div class="nose"></div>
			<div class="mouth"></div>
		</div>
		<div class="body"> </div>
		<div class="foot">
			<div class="finger"></div>
		</div>
		<div class="foot rgt">
			<div class="finger"></div>
		</div>
	</div>
	<form action="/user.do?action=login" method="post">

		<div class="hand"></div>
		<div class="hand rgt"></div>

		<spn><h1>用户登录</h1></spn>
        <spn> <a  href="page/zhuce/signin.jsp" >注册？</a></spn>
		<%--<span class="errorMsg" style="color: orangered">${msg}</span>--%>
		<div class="form-group">
			<input required="required" class="form-control"  name="userName" value="${param.username }" style="width: 100%">
			<label class="form-label">请输入用户名</label>
		</div>
		<div class="form-group">
			<span>
                <input id="password" type="password" required="required" class="form-control" name="userpassword" style="width: 200px">
                <label class="form-label" >密码</label>
               <a  href="page/zhuce/returnPassword.jsp">你忘记密码了？</a>
            </span>
			<p class="alert" id="errorMsg">${empty msg ? "验证未通过！": msg }</p>
			<button class="btn" id="sub_btn">登 录</button>
		</div>
		<%--<p ><a href="page/zhuce/returnPassword.jsp">你忘记密码了？</a></p>--%>

	</form>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
	<script type="text/javascript">
        $(function () {

            //给注册按钮绑定单击事件
            $("#sub_btn").click(function () {
                //1.获取用户名输入框里的内容
                var usernameText = $("#userName").val();
                // //2.正则表达式对象创建
                // var usernamePatt = /^\w{2,12}$/;
                //3.使用test方法验证
                if (!usernamePatt.test(usernameText)) {
                    $('span.errorMsg').text("请输入2-12位的用户名");
                    return false;
                }


                //验证密码：必须由字母、数字下划线组成 并且长度为5-12位
                var passwordText = $("#userpassword").val();
                //2.正则表达式对象创建
                // var passwordPatt = /^\w{5,12}$/;

                //3.使用test方法验证
                if (!passwordPatt.test(passwordText)) {
                    $('span.errorMsg').text("请输入5-12位的密码");
                    return false;
                }
            });
        });
	</script>
</div>
</body>
</html>